<template>
    <el-tabs v-model="activeTab" @tab-click="clickBtn" type="card" class="demo-tabs" closable @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabsList" :key="item.path" :label="item.title" :name="item.path">
        </el-tab-pane>
    </el-tabs>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, computed } from 'vue'
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';

export interface ITabe {
    title: string,
    path: string
}

const store = useStore()
const route = useRoute()
const router = useRouter()
//获取tabs数据
const tabsList = computed(() => {
    return store.getters['getTabs']
})
console.log(tabsList, "tabsList")
// let tabIndex = 2
const activeTab = ref('2')

//点击选项卡,跳转到相应的页面，菜单也恢复到相应的页面
const clickBtn = (tab: any) => {
    const { props } = tab
    router.push({ path: props.name })
}

//删除选项卡，跳转到临近页面，这个tabs标签删除
const removeTab = (targetName: string) => {
    if (store.state.MemberInfo.tabsList.length === 1) return
    const tabs = tabsList.value
    let activeName = activeTab.value
    if (activeName === targetName) {   //如果当前的路由是要删除的页面
        tabs.forEach((tab: ITabe, index: number) => {
            if (tab.path === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1]  //如果在中间的tab，删除会选择在后面的一个；如果在最后，会选择在前面的一个tab
                if (nextTab) {
                    activeName = nextTab.path  //更换当前路由的地址
                }
            }
        })
    }

    //重新设置当前激活的选项卡
    activeTab.value = activeName

    //重新设置选项卡数据,将数组中去掉删除的元素
    store.state.MemberInfo.tabsList = tabs.filter((tab: ITabe) => tab.path !== targetName)

    //跳转路由
    router.push({ path: activeName })
}

//添加路由的选项卡
const addTabs = () => {
    const { path, meta } = route
    const tabs: ITabe = {
        title: meta.title as string,
        path: path
    }
    store.commit('addTab', tabs)
}
//激活选项卡
const setActiveTab = () => {
    activeTab.value = route.path  //因为el-tab-pane的name是item.path，所以activeTab也是path
}

watch(() => route.path, () => {
    //激活选项卡
    setActiveTab()
    //监听路由的变化
    addTabs()
})

//解决刷新数据页面丢失的问题
const beforeRefresh = () => {
    window.addEventListener("beforeunload", () => { //监听刷新
        // sessionStorage当浏览器关闭时，结束。localStorage，没有期限
        sessionStorage.setItem('tabsView', JSON.stringify(tabsList.value))
    })
    //页面加载时取数据
    let tabSession = sessionStorage.getItem('tabsView')
    if (tabSession) {
        let oldTabs = JSON.parse(tabSession)
        if (oldTabs.length > 0) {
            store.state.MemberInfo.tabsList = oldTabs
        }
    }
}
//调用函数需要在模板加载之后调用
onMounted(() => {
    beforeRefresh()
    setActiveTab()
    addTabs()
})
</script>

<style lang="scss" scoped>
.el-tabs {
    --el-tabs-header-height: 42px;
}

.demo-tabs {
    border-top: 1px solid #ccc;
}

:deep.el-tabs--card>.el-tabs__header {
    border-bottom: none;
}

:deep.el-tabs--card>.el-tabs__header .el-tabs__item {
    border-top: 2px solid #3A91FB;
    background-color: #EBF4FF;
}

:deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
}
</style>
